<template>
  <div class="widget-form-container">
    <div v-if="widgetForm.list.length === 0" class="form-empty">
        暂无控件,从左侧拖拽来添加字段
    </div>
    <a-form
      :model="formState"
      :layout="widgetForm.config.layout"
      :labelAlign="widgetForm.config.labelAlign"
      autocomplete="off"
    >
    <!-- ghostClass是拖过来的那条线的类名 -->
    <Draggable
        class="widget-form-list"
        item-key="key"
        ghostClass="ghost"
        handle=".drag-widget"
        :animation="200"
        :group="{ name: 'people' }"
        :list="widgetForm.list"
        @add="handleMoveAdd"
      >
        <template #item="{ element, index }">
          <transition-group name="fade" tag="div">

              <template v-if="element.type === 'grid'">
                栅格控件
              </template>
              <template v-if="element.type === 'table'">
                表格控件
              </template>
              <template v-else>
                <!-- 普通控件 -->
                <DesignFormItem
                  v-if="element.key"
                  :widgetForm="widgetForm"
                  :key="element.key"
                  :element="element"
                  :config="widgetForm.config"
                  :selectWidget="widgetFormSelect"
                  @click="handleItemClick(element)"
                  @copy="handleCopyClick(index, widgetForm.list)"
                  @delete="handleDeleteClick(index, widgetForm.list)"
                ></DesignFormItem>
              </template>
          </transition-group>
        </template>
      </Draggable>
    </a-form>
  </div>
</template>

<script>
import {computed, defineComponent, nextTick, reactive, provide,toRefs} from 'vue'
import Draggable from 'vuedraggable'
import { v4 } from 'uuid'
import {merge} from "lodash";
import DesignFormItem from './DesignFormItem.vue'
import { handleListInsert, handleListDelete} from './hooks/useList.js'
export default {
  components:{
    DesignFormItem,
    Draggable
  },
  props: {
    // 表单拖拽生成的数据
    widgetForm: {
      type: Object,
      required: true
    },
    // 表单选中数据
    widgetFormSelect: {
      type: Object
    }
  },
  data(){
    return {

    }
  },
  methods:{

  },
  emits: ['update:widgetForm', 'update:widgetFormSelect'],
  setup (props, context) {
    // 点击控件聚焦操作
    const handleItemClick = (row) => {
      context.emit('update:widgetFormSelect', row)
    }
    // 添加控件时候的数据处理
    const handleMoveAdd = (event) => {
      const { newIndex } = event

      const key = v4().replaceAll('-', '')
      const list = JSON.parse(JSON.stringify(props.widgetForm.list))

      list[newIndex] = {
        ...list[newIndex],
        key,
        model: `${list[newIndex].type}_${key}`,
        rules: []
      }
      // 对于radio checkbox select做处理
      if (
        list[newIndex].type === 'radio' ||
        list[newIndex].type === 'checkbox' ||
        list[newIndex].type === 'select'
      ) {
        list[newIndex] = {
          ...list[newIndex],
          options: {
            ...list[newIndex].options,
            options: list[newIndex].options.options.map((item) => ({
              ...item
            }))
          }
        }
      }
      // 对于grid做处理
      if (list[newIndex].type === 'grid') {
        list[newIndex] = {
          ...list[newIndex],
          columns: list[newIndex].columns.map((item) => ({ ...item }))
        }
      }
      // 触发数据源更新
      context.emit('update:widgetForm', { ...props.widgetForm, list })
      // 触发选中 数据源更新
      context.emit('update:widgetFormSelect', list[newIndex])
    }
    // 复制控件的逻辑
    const handleCopyClick = (index, list) => {
      const key = v4().replaceAll('-', '')
      const oldList = JSON.parse(JSON.stringify(props.widgetForm.list))

      let copyData = {
        ...list[index],
        key,
        model: `${list[index].type}_${key}`,
        rules: list[index].rules ?? []
      }

      if (
        list[index].type === 'radio' ||
        list[index].type === 'checkbox' ||
        list[index].type === 'select'
      ) {
        copyData = {
          ...copyData,
          options: {
            ...copyData.options,
            options: copyData.options.options.map((item) => ({ ...item }))
          }
        }
      }

      context.emit('update:widgetForm', {
        ...props.widgetForm,
        list: handleListInsert(list[index].key, oldList, copyData)
      })

      context.emit('update:widgetFormSelect', copyData)
    }

    // 点击控件删除
    const handleDeleteClick = (index, list) => {
      const oldList = JSON.parse(JSON.stringify(props.widgetForm.list))

      if (list.length - 1 === index) {
        if (index === 0) {
          nextTick(() => context.emit('update:widgetFormSelect', null))
        } else {
          context.emit('update:widgetFormSelect', list[index - 1])
        }
      } else {
        context.emit('update:widgetFormSelect', list[index + 1])
      }

      context.emit('update:widgetForm', {
        ...props.widgetForm,
        list: handleListDelete(list[index].key, oldList)
      })
    } 


    return {
      handleMoveAdd,
      handleItemClick,
      handleDeleteClick,
      handleCopyClick
    }
  }
}
</script>